<template>
  <div class="pcs-monitor">
    <!-- PCS状态概览 -->
    <el-row :gutter="20">
      <el-col :span="8">
        <el-card class="status-card">
          <template #header>
            <div class="card-header">
              <span>{{ $t('deviceDetail.pcsStatus') }}</span>
            </div>
          </template>
          <div class="status-container">
            <div class="status-icon">
              <i class="el-icon-cpu" :class="{ running: pcsRunning }"></i>
            </div>
            <div class="status-text">
              <p class="status-label">{{ $t('deviceDetail.pcsStatus') }}</p>
              <p class="status-value" :class="{ running: pcsRunning }">
                {{ pcsRunning ? $t('deviceDetail.running') : $t('deviceDetail.stopped') }}
              </p>
            </div>
          </div>
          <div class="status-details">
            <el-row :gutter="10">
              <el-col :span="12">
                <div class="detail-item">
                  <span class="detail-label">{{ $t('deviceDetail.runMode') }}</span>
                  <span class="detail-value">并网运行</span>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="detail-item">
                  <span class="detail-label">{{ $t('deviceDetail.temperature') }}</span>
                  <span class="detail-value">45.2°C</span>
                </div>
              </el-col>
            </el-row>
          </div>
        </el-card>
      </el-col>

      <!-- 功率数据 -->
      <el-col :span="8">
        <el-card class="power-card">
          <template #header>
            <div class="card-header">
              <span>{{ $t('deviceDetail.powerData') }}</span>
            </div>
          </template>
          <div class="power-data">
            <div class="power-item">
              <div class="power-label">{{ $t('deviceDetail.activePower') }}</div>
              <div class="power-value">850kW</div>
            </div>
            <div class="power-item">
              <div class="power-label">{{ $t('deviceDetail.reactivePower') }}</div>
              <div class="power-value">120kVar</div>
            </div>
            <div class="power-item">
              <div class="power-label">{{ $t('deviceDetail.powerFactor') }}</div>
              <div class="power-value">0.98</div>
            </div>
          </div>
        </el-card>
      </el-col>

      <!-- 电压电流数据 -->
      <el-col :span="8">
        <el-card class="electrical-card">
          <template #header>
            <div class="card-header">
              <span>{{ $t('deviceDetail.electricalData') }}</span>
            </div>
          </template>
          <div class="electrical-data">
            <div class="electrical-item">
              <div class="electrical-label">{{ $t('deviceDetail.voltage') }}</div>
              <div class="electrical-value">380V</div>
            </div>
            <div class="electrical-item">
              <div class="electrical-label">{{ $t('deviceDetail.current') }}</div>
              <div class="electrical-value">1290A</div>
            </div>
            <div class="electrical-item">
              <div class="electrical-label">{{ $t('deviceDetail.frequency') }}</div>
              <div class="electrical-value">50.0Hz</div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 三相数据详情 -->
    <el-row :gutter="20" style="margin-top: 20px;">
      <el-col :span="24">
        <el-card class="three-phase-card">
          <template #header>
            <div class="card-header">
              <span>{{ $t('deviceDetail.threePhaseData') }}</span>
            </div>
          </template>
          <el-table :data="threePhaseData" style="width: 100%">
            <el-table-column prop="phase" :label="$t('deviceDetail.phase')" width="100" />
            <el-table-column prop="voltage" :label="$t('deviceDetail.voltage')" width="120">
              <template #default="{ row }">
                {{ row.voltage }}V
              </template>
            </el-table-column>
            <el-table-column prop="current" :label="$t('deviceDetail.current')" width="120">
              <template #default="{ row }">
                {{ row.current }}A
              </template>
            </el-table-column>
            <el-table-column prop="power" :label="$t('deviceDetail.power')" width="120">
              <template #default="{ row }">
                {{ row.power }}kW
              </template>
            </el-table-column>
            <el-table-column prop="powerFactor" :label="$t('deviceDetail.powerFactor')" width="120">
              <template #default="{ row }">
                {{ row.powerFactor }}
              </template>
            </el-table-column>
            <el-table-column prop="thd" :label="$t('deviceDetail.thd')" width="120">
              <template #default="{ row }">
                {{ row.thd }}%
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-row>

    <!-- PCS运行参数 -->
    <el-row :gutter="20" style="margin-top: 20px;">
      <el-col :span="12">
        <el-card class="parameter-card">
          <template #header>
            <div class="card-header">
              <span>{{ $t('deviceDetail.pcsParameters') }}</span>
            </div>
          </template>
          <el-descriptions :column="2" border>
            <el-descriptions-item :label="$t('deviceDetail.switchStatus')">
              <el-tag type="success">合闸</el-tag>
            </el-descriptions-item>
            <el-descriptions-item :label="$t('deviceDetail.dcVoltage')">
              750V
            </el-descriptions-item>
            <el-descriptions-item :label="$t('deviceDetail.dcCurrent')">
              1133A
            </el-descriptions-item>
            <el-descriptions-item :label="$t('deviceDetail.conversionEfficiency')">
              96.8%
            </el-descriptions-item>
            <el-descriptions-item :label="$t('deviceDetail.moduleTemp')">
              45.2°C
            </el-descriptions-item>
          </el-descriptions>
        </el-card>
      </el-col>

      <!-- 保护状态 -->
      <el-col :span="12">
        <el-card class="protection-card">
          <template #header>
            <div class="card-header">
              <span>{{ $t('deviceDetail.protectionStatus') }}</span>
            </div>
          </template>
          <div class="protection-grid">
            <div v-for="item in protectionData" :key="item.name" class="protection-item">
              <div class="protection-name">{{ item.name }}</div>
              <div class="protection-status">
                <span :class="['status-indicator', item.status ? 'normal' : 'fault']"></span>
                <span class="status-text">{{ item.status ? '正常' : '故障' }}</span>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const pcsRunning = ref(true)

const threePhaseData = ref([
  { phase: 'A相', voltage: 380.2, current: 428.5, power: 285.2, powerFactor: 0.98, thd: 2.1 },
  { phase: 'B相', voltage: 379.8, current: 429.1, power: 284.8, powerFactor: 0.97, thd: 2.3 },
  { phase: 'C相', voltage: 380.5, current: 428.9, power: 285.0, powerFactor: 0.98, thd: 2.2 }
])

const protectionData = ref([
  { name: '过压保护', status: true },
  { name: '欠压保护', status: true },
  { name: '过流保护', status: true },
  { name: '短路保护', status: true },
  { name: '过温保护', status: true },
  { name: '接地保护', status: true },
  { name: '防雷保护', status: true },
  { name: '绝缘保护', status: true }
])
</script>

<style scoped>
.pcs-monitor {
  height: 100%;
  overflow-y: auto;
}

.status-card, .power-card, .electrical-card, .three-phase-card, .parameter-card, .protection-card {
  height: 100%;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 500;
}

.status-container {
  display: flex;
  align-items: center;
  padding: 20px 0;
}

.status-icon {
  margin-right: 20px;
}

.status-icon i {
  font-size: 64px;
  color: #909399;
  transition: color 0.3s;
}

.status-icon i.running {
  color: #67c23a;
}

.status-text .status-label {
  margin: 0;
  font-size: 14px;
  color: #909399;
}

.status-text .status-value {
  margin: 8px 0 0 0;
  font-size: 24px;
  font-weight: 600;
  color: #f56c6c;
}

.status-text .status-value.running {
  color: #67c23a;
}

.status-details {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid #e4e7ed;
}

.detail-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.detail-label {
  font-size: 14px;
  color: #606266;
}

.detail-value {
  font-size: 14px;
  font-weight: 500;
  color: #303133;
}

.power-data, .electrical-data {
  padding: 10px 0;
}

.power-item, .electrical-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.power-item:last-child, .electrical-item:last-child {
  margin-bottom: 0;
}

.power-label, .electrical-label {
  font-size: 14px;
  color: #606266;
}

.power-value, .electrical-value {
  font-size: 20px;
  font-weight: 600;
  color: #303133;
}

.protection-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.protection-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px;
  background: #f8f9fa;
  border-radius: 6px;
}

.protection-name {
  font-size: 14px;
  color: #606266;
}

.protection-status {
  display: flex;
  align-items: center;
  gap: 8px;
}

.status-indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #f56c6c;
}

.status-indicator.normal {
  background-color: #67c23a;
}

.status-text {
  font-size: 12px;
  font-weight: 500;
}
</style>